import React, { Component } from 'react';
import axios from 'axios';
import Loading from './Loading'
import Page from './Page'

class ExceptionList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dataList: [],
      count: 0,
      loading: false,
      timer: Date.now(),
      cur: 1
    }
  }

  asyncData = async (pageNo) => {
    this.setState({loading: true});

    const response = await axios
              .get(`http://localhost:63931/Log/GetManagerExceptionLog?&pageNo=${pageNo}`);

    const { data } = response;
    if(data.success) {
      this.setState({
        dataList: data.data.list,
        count: data.data.count,
        loading: false,
        timer: Date.now(),
        cur: pageNo
      })
    }
  }

  onPageChange = async (pageNo) => {
    this.asyncData(pageNo)
  }

  async componentDidMount() {
    this.asyncData(1)
  }

  render() {
    return (
      <div id="exceptionList">
        <Loading key={this.state.loading} isShow={this.state.loading} />
        <h1>异常日志 ({this.state.count})</h1>
        <Page key={this.state.timer + 1} onPageChange={this.onPageChange} count={this.state.count} cur={this.state.cur} />
        <table className="table table-bordered">
          <thead>
            <tr>
                <th style={{width: "10%"}}>帐号</th>
                <th style={{width: "10%"}}>业务ID</th>
                <th style={{width: "15%"}}>操作源</th>
                <th style={{width: "30%"}}>描述</th>
                <th style={{}}>堆栈</th>
                <th style={{width: "5%"}}>创建时间</th>
            </tr>
          </thead>
          <tbody>
           {this.state.dataList.map(data =>(
              <tr key={data.id}>
                <td>{data.account}</td>
                <td>{data.businessID}</td>
                <td>{data.source}</td>
                <td style={{"wordBreak": "break-all"}}>{data.message}</td>
                <td style={{"wordBreak": "break-all"}}>{data.stackTrace}</td>
                <td>{data.createdOn}</td>
              </tr>
              ))}
          </tbody>
        </table>
        <Page key={this.state.timer + 2} onPageChange={this.onPageChange} count={this.state.count} cur={this.state.cur} />
      </div>
    )
  }
}

export default ExceptionList